import React from 'react'
import './home.css'
import { Progress, Button, Modal, Tooltip } from 'antd'
import { Link } from 'react-router-dom'
import { getHomeData } from '@api/home'
import { split, getDate } from '@utility/filter'
import { imageBase } from '@config/host'
import {
  ClockCircleFilled,
  CheckCircleFilled,
  CloseCircleFilled,
  CloseCircleOutlined,
  ExclamationCircleFilled,
  QuestionCircleOutlined
} from '@ant-design/icons'

class Home extends React.Component {

  state = {
    submitFailShow: false, // 是否显示提交失败弹窗
    hintSubmitShow: true, // 是否显示提示栏
    hasMessage: true, // 是否有新消息
    readShow: false, // 是否显示阅读弹窗
    loaded: false, // 是否已加载完数据
  }

  componentDidMount() {
    this.getHomeData()
  }

  getHomeData() {
    getHomeData().then(res => {
      console.log('首页数据：', res)
      let { baseInfo, messageInfo, projectInfo } = res
      this.setState({
        baseInfo,
        messageInfo,
        projectInfo,
        loaded: true
      })
    })
  }

  // 提交
  submit = () => {
    this.setState({
      submitFailShow: true
    })
  }

  // 返回修改
  backModification = () => {
    this.setState({
      submitFailShow: false
    })
  }

  // 阅读
  read = () => {
    this.setState({
      readShow: true
    })
  }

  // 已阅读
  readed = () => {
    this.setState({
      readShow: false
    })
  }

  render() {
    let { submitFailShow, hintSubmitShow, hasMessage, readShow, messageInfo, baseInfo, projectInfo, loaded } = this.state
    return loaded ? (
      <div className="_home">
        {/* 阅读弹窗 */}
        {
          readShow &&
          <div className="read_modal">
            <Modal
              width="1184px"
              getContainer={ false }
              closable={ false }
              visible
              footer={ null }
              bodyStyle={{
                height: 697
              }}
            >
              <div className="read_modal-main">
                <div className="read_modal-title">{ messageInfo.title }</div>
                <div className="read_modal-content">
                  <p className="read_modal-text">{ messageInfo.content }</p>
                  <div className="read_modal-images">
                    {
                      split(messageInfo.img).map((item, index) => {
                        return (
                          <img className="read_modal-images-item" src={ imageBase + '/' + item } alt="" key={ index }/>
                        )
                      })
                    }
                  </div>
                </div>
                <div className="read_modal-footer">
                  <Button className="read_modal-confirm" onClick={ this.readed }>已阅读</Button>
                </div>
              </div>
            </Modal>
          </div>
        }
        {/* 提示栏 */}
        {
          hintSubmitShow &&
          <div className="hint-bar">
            {
              baseInfo.isCommit === 1 ?
              <div className="hint hint-submited">
                <div className="hint-box">
                  <img className="hint-icon" src="/images/home-hint-submited.png" alt="" />
                  <p className="hint-text">已填报完2021年预算申报厅机关执行项目，系统目前已锁定，无法编辑与修改项目内容。</p>
                </div>
              </div> :
              <div className="hint">
                <div className="hint-box">
                  <img className="hint-icon" src="/images/home-hint.png" alt="" />
                  <p className="hint-text">如已填报完2021年预算，信息确认无误后请点击提交，提交后系统进入锁定状态，无法修改内容。</p>
                </div>
                <div className="hint-submit" onClick={ this.submit }>提交</div>
              </div>
            }
          </div>
        }
        {/* 引导弹窗 */}
        {/* <div className="guide_modal"></div> */}
        {/* 主要内容 */}
        <div className="home-content">
          <div className="container container1">
            <div className="box box1">
              <div className="guide_view">
                <div className="content content1 content1-1 residue">
                  <div className="content-title">距离省职各单位2021年项目申报工作截止还有</div>
                  <div className="content-main residue-box">
                  </div>
                </div>
                <div className="content content1 content1-2 steps">
                  <div className="content-title">本部门2021年部门预算编制工作进程</div>
                  <div className="content-main steps-box">
                    <div className="steps-list">
                      {
                        baseInfo.jcxmStatus === 1 ?
                        <div className="steps-item active">
                          <div className="steps-item-left">
                            <CheckCircleFilled />
                            <div className="steps-item-title">经常性项目</div>
                          </div>
                          <div className="steps-item-right">已完成</div>
                        </div> :
                        <div className="steps-item">
                          <div className="steps-item-left">
                            <ClockCircleFilled />
                            <div className="steps-item-title">经常性项目</div>
                          </div>
                          <div className="steps-item-right">未完成</div>
                        </div>
                      }
                      {
                        baseInfo.xzxmStatus === 1 ?
                        <div className="steps-item active">
                          <div className="steps-item-left">
                            <CheckCircleFilled />
                            <div className="steps-item-title">新增项目</div>
                          </div>
                          <div className="steps-item-right">已完成</div>
                        </div> :
                        <div className="steps-item">
                          <div className="steps-item-left">
                            <ClockCircleFilled />
                            <div className="steps-item-title">新增项目</div>
                          </div>
                          <div className="steps-item-right">未完成</div>
                        </div>
                      }
                      {
                        baseInfo.wnxmStatus === 1 ?
                        <div className="steps-item active">
                          <div className="steps-item-left">
                            <CheckCircleFilled />
                            <div className="steps-item-title">往年度本年待支付</div>
                          </div>
                          <div className="steps-item-right">已完成</div>
                        </div> :
                        <div className="steps-item">
                          <div className="steps-item-left">
                            <ClockCircleFilled />
                            <div className="steps-item-title">往年度本年待支付</div>
                          </div>
                          <div className="steps-item-right">未完成</div>
                        </div>
                      }
                    </div>
                  </div>
                </div>
                <div className="guide_bubble guide_bubble1">
                  <div className="row">该处提示<span className="active">项目申报工作倒计时</span>倒计时结束后系统关闭</div>
                  <div className="row">提示本单位<span className="active">申报工作进度</span></div>
                  <Button className="button" type="primary">保存</Button>
                </div>
              </div>
            </div>
            <div className="box box2 data">
              <div className="content content2">
                <div className="guide_view">
                  <div className="content-title">本部门2021年部门预算编制工作进程</div>
                </div>
                <div className="content-main">
                  <div className="guide_view">
                    <div className="data-money">
                      <div className="data-money-item">
                        <div className="data-money-number textLeft">{ projectInfo.allAmount }</div>
                        <div className="data-money-title">已上报累计项目金额（元）</div>
                      </div>
                      <div className="data-money-item">
                        <div className="data-money-number">{ projectInfo.allCount }</div>
                        <div className="data-money-title">总项目数量（个）</div>
                      </div>
                    </div>
                    <div className="guide_bubble guide_bubble4">
                      <div className="row">这里会统计您在系统里面已上报的累计项目金额</div>
                      <Button className="button" type="primary">我知道了</Button>
                    </div>
                  </div>
                  <div className="guide_view">
                    <div className="data-accumulative">
                      <div className="data-accumulative-item">
                        <div className="data-accumulative-item-left">
                          <div className="data-accumulative-title">经常性项目累计项目金额（元）</div>
                          <div className="data-accumulative-money">
                            <span className={ projectInfo.jcxmAmount > projectInfo.jcxmPropare ? 'red' : 'gray' }>{ projectInfo.jcxmAmount }</span>
                            &nbsp;/&nbsp;{ projectInfo.jcxmPropare }
                            {
                              projectInfo.jcxmAmount > projectInfo.jcxmPropare &&
                              <Tooltip placement="top" title="？？？">
                                <QuestionCircleOutlined style={{ fontSize: 14, marginLeft: 8, color: '#747474' }} />
                              </Tooltip>
                            }
                          </div>
                          <div className="data-accumulative-total">已上报累计项目金额（元）/可支配项目金额</div>
                        </div>
                        <div className="data-accumulative-item-right">
                          <div className="data-accumulative-number">{ projectInfo.jcxmCount }</div>
                          <div className="data-accumulative-unit">项目数量（个）</div>
                        </div>
                      </div>
                      <div className="data-accumulative-item">
                        <div className="data-accumulative-item-left">
                          <div className="data-accumulative-title">新增目累计项目金额（元）</div>
                          <div className="data-accumulative-money">{ projectInfo.xzxmAmount }</div>
                          <div className="data-accumulative-total">已上报累计项目金额（元）</div>
                        </div>
                        <div className="data-accumulative-item-right">
                          <div className="data-accumulative-number">{ projectInfo.xzxmCount }</div>
                          <div className="data-accumulative-unit">项目数量（个）</div>
                        </div>
                      </div>
                      <div className="data-accumulative-item">
                        <div className="data-accumulative-item-left">
                          <div className="data-accumulative-title">往年度本年度支付累计项目金额（元）</div>
                          <div className="data-accumulative-money">{ projectInfo.wnxmAmount }</div>
                          <div className="data-accumulative-total">已上报累计项目金额（元）</div>
                        </div>
                        <div className="data-accumulative-item-right">
                          <div className="data-accumulative-number">{ projectInfo.wnxmCount }</div>
                          <div className="data-accumulative-unit">项目数量（个）</div>
                        </div>
                      </div>
                    </div>
                    <div className="guide_bubble guide_bubble5">
                      <div className="row">该模块将会按<br /><span className="active">【经常性项目累计金额】、【2021年新增项目累计金额】、【往年度本年待支付累计金额】</span><br />分别统计各类的预算金额和项目数</div>
                      <div className="row">请将经常性项目预算控制在该金额内，不能超出该金额，否则项目无法项目提交！</div>
                      <Button className="button" type="primary">下面开始尝试添加一个三级项目吧！</Button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="container container2">
            <div className="box box3 progress">
              <div className="content content3">
                <div className="content-title">厅职各单位总提交进度</div>
                <div className="content-main progress-box">
                  <Progress
                    strokeLinecap="square"
                    type="circle"
                    percent={ baseInfo.proccessAll }
                    width={ 110 }
                    strokeWidth={ 9 }
                    format={() =>
                      <>
                        <div className="progress-percent">{ baseInfo.proccessAll }%</div>
                        <div className="progress-submited">{ baseInfo.proccessAll === 100 ? '已提交' : '未提交' }</div>
                      </>
                    } />
                </div>
              </div>
            </div>
            <div className="box box4">
              <div className="guide_view">
                {
                  hasMessage ?
                    <div className="content content4 message hasmessage">
                      <div className="content-title"><ExclamationCircleFilled className="hasmessage-icon" />待阅读消息1条</div>
                      <div className="content-main message-box">
                        <div className="message-title ellipsis3">{ messageInfo.title }</div>
                        <p className="message-content ellipsis8">{ messageInfo.content }</p>
                        <p className="message-date">{ getDate(messageInfo.createdate, 'Y-M-D') }</p>
                        {/* <Link to="/message/detail"> */}
                          <Button className="message-button" type="primary" danger onClick={ this.read }>阅读消息</Button>
                        {/* </Link> */}
                      </div>
                    </div> :
                    <div className="content content4 message">
                      <div className="content-title">消息通知</div>
                      <div className="content-main message-box">
                        <div className="message-title ellipsis3">关于做好2021年部门预算“二上”编制工作通知关于做好2021年部门预算</div>
                        <p className="message-content ellipsis8">厅直各单位，根据省财厅2021年部门预算编制有关要求，为共同做好我厅部预算“二上”编制工作，确保编全编实编细预算草案，确保明年预算下单后项目可执行，请尽早展开工作。</p>
                        <p className="message-date">2020年8月5日</p>
                        <Link to="/message/detail">
                          <Button className="message-button" type="primary">查看全部</Button>
                        </Link>
                      </div>
                    </div>
                }
                <div className="guide_bubble guide_bubble2">
                  <div className="row">该模块将展示上级推送的通知消息点击【查看全部】<span className="active">即可快速掌握最新工作指引及日常消息</span>
                    <div className="row">点击<span className="active">【查看全部】</span>查看您的第一条消息</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        {/* 提交失败弹窗 */}
        {
          submitFailShow &&
          <div className="submit_fail">
            <div className="submit_fail-box">
              <CloseCircleFilled className="submit_fail-icon" />
              <div className="submit_fail-title">提交失败</div>
              <div className="submit_fail-hint">请核对并修改以下信息后，再重新提交</div>
              <Button className="submit_fail-back_btn" type="primary" onClick={this.backModification}>返回修改</Button>
              <div className="submit_fail-list">
                <div className="submit_fail-list-title">您提交的内容有如下错误</div>
                <div className="submit_fail-list-box">
                  <div className="submit_fail-list-item">
                    <CloseCircleOutlined className="item-icon" />
                    <div className="item-title">【新增项目】模块中有数据不符合要求，请修改</div>
                  </div>
                  <div className="submit_fail-list-item">
                    <CloseCircleOutlined className="item-icon" />
                    <div className="item-title">【往年度本年待支付项目】模块中有数据不符合要求，请修改</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        }
      </div>
    ) : null
  }

}

export default Home